<template>
  <div class="app-container warp_auto">
    <el-card>
      <div slot="header">
        <span
          >医嘱列表
          <el-tooltip placement="right">
            <div slot="content" style="font-size: 16px">
              医嘱的执行流程是在his系统中进行的<br />
              重症系统不参与医嘱执行流程，在此处展示从his同步过来的医嘱信息<br />
            </div>
            <i class="el-icon-question" />
          </el-tooltip>
        </span>
      </div>
      <div class="search-box">
        <div class="item">
          <span>状态：</span>
          <el-select v-model="radio1" clearable>
            <el-option
              v-for="item in statusArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="item">
          <span>同步状态:</span>
          <el-radio-group
            v-model="radio2"
            style="margin-left: 10px"
          >
            <el-radio-button :label="5">全部</el-radio-button>
            <el-radio-button :label="1">已同步</el-radio-button>
            <el-radio-button :label="0">未同步</el-radio-button>
          </el-radio-group>
        </div>
        <div class="item">
          <span>医嘱时间:</span>
          <el-date-picker
            style="margin-left: 10px"
            v-model="enterStartTime"
            align="right"
            :clearable="false"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          />
        </div>
        <div class="item">
          <span>医嘱类型：</span>
          <el-radio-group v-model="radio3">
            <el-radio-button label="">全部</el-radio-button>
            <el-radio-button label="1">长嘱</el-radio-button>
            <el-radio-button label="0">临嘱</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="search-box">
        <div class="item">
          <span>药嘱类型：</span>
          <el-radio-group v-model="drugRadio">
            <el-radio label="">全部</el-radio>
            <el-radio label="1">
              药嘱
              <el-checkbox-group v-model="drugCheckList" :disabled="drugRadio != 1">
                <el-checkbox :label="0">药品</el-checkbox>
                <el-checkbox :label="8">输液</el-checkbox>
              </el-checkbox-group>
            </el-radio>
            <el-radio label="0">非药嘱</el-radio>
          </el-radio-group>
        </div>
        <div class="item">
          <el-button type="primary" icon="el-icon-search" class="Btn" @click="queryData"
          >检索</el-button
          >
        </div>
      </div>
    </el-card>
    <el-card shadow="never">
      <el-table
        :data="tableData"
        style="width: 100%"
        stripegetExitDepartment
        :header-cell-style="{ background: '#d2e0f9', color: '#606266' }"
        ref="multipleTable"
      >
        <el-table-column type="index" label="序号"  fixed />
        <el-table-column label="id" align="center" prop="id" v-if="false" />
      <el-table-column label="计划执行时间" align="center">
        <template slot-scope="scope">
        <span v-if="scope.row.orderNo == scope.row.orderSubNo">{{ scope.row.startTimePoint }}</span>
        </template>
      </el-table-column>
        <el-table-column
          prop="orderName"
          label="医嘱内容"
          align="center"
        />
        <el-table-column
          prop="drugType"
          label="是否药嘱"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.drugType === 0 ? "否" : "是" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="repeatIndicator"
          label="医嘱类型"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.repeatIndicator === 0 ? "临时医嘱" : "长期医嘱" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="useMode"
          label="给药途径"
          align="center"
        />
        <el-table-column
          prop="frequency"
          label="频次"
          align="center"
        />
        <el-table-column
          prop="defaultTimePoint"
          label="医嘱时间"
          align="center"
        />
        <el-table-column
          prop="orderStatus"
          label="状态"
          align="center"
        >
          <template slot-scope="scope">
            {{
              scope.row.orderStatus == "0"
                ? "待审"
                : scope.row.orderStatus == "1"
                ? "审核"
                : scope.row.orderStatus == "2"
                ? "执行"
                : scope.row.orderStatus == "3"
                ? "取消"
                : "停止"
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="isSync"
          label="同步状态"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.isSync === 0 ? "未同步" : "已同步" }}
          </template>
        </el-table-column>
      </el-table>

      <div class="paging">
        <el-pagination
          :current-page="start"
          :page-size="PageSize"
          :pager-count="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import {medOrderExecQueryList} from "@/api/table";
import { dateUtils } from '@/utils/dateUtils'

export default {
  data() {
    return {
      //医嘱状态
      statusArr: [
        {
          id: "0",
          name: "待审",
        },
        {
          id: "1",
          name: "审核",
        },
        {
          id: "2",
          name: "执行",
        },
        {
          id: "3",
          name: "取消",
        },
        {
          id: "4",
          name: "停止",
        },
      ],
      tableData: [],//医嘱列表
      data: {},//患者信息
      start: 1, // 默认显示第几页
      totalCount: 0, // 总条数，根据接口获取数据长度(注意：这里不能为空)
      pgeSizes: [10, 20, 30, 40], // 个数选择器（可修改）
      PageSize: 10, // 默认每页显示的条数（可修改）
      radio1: "", //状态
      radio2: 5, //同步状态
      radio3: '', //医嘱类型单选框 0：临时医嘱；1：长期医嘱 2:全部
      drugRadio: '', //药嘱类别单选框  2是全部，1是药嘱，0是非药嘱
      drugCheckList: [0,8], //药嘱多选列表
      patientId: "",//患者id
      enterStartTime: "",//医嘱时间
    };
  },
  computed: {
    getData() {
      return this.$store.state.user.severFall;
    },
  },
  watch: {
    getData() {
      this.initData();
    },
  },
  mounted() {
     this.initData();
  },
  methods: {
    //初始化方法
    initData(){
      this.enterStartTime=dateUtils(1,null);
      this.data = this.$store.state.user.severFall;
      if (
        typeof this.data.patient_id == "string" &&
        this.data.patient_id.length > 0
      ) {
        this.patientId = this.data.patient_id;
        this.medOrderExecQueryList(this.PageSize, this.start);
      } else {
        this.$message({
          message: "请先选择病人",
          type: "warning",
        });
      }
    },
    medOrderExecQueryList(pageSize, start) {
      if (
        typeof this.data.patient_id == "string" &&
        this.data.patient_id.length > 0
      ) {
        if(this.drugRadio == '1' && this.drugCheckList.length == 0){
          this.$message({message: "药嘱选项不能为空", type: "warning"});
          return;
        }
        medOrderExecQueryList({
          drugType: this.drugRadio, //药嘱类型
          repeatIndicator: this.radio3, //医嘱类型
          classType: this.drugCheckList.toString(), //药嘱类别
          orderStatus: this.radio1, //状态
          isSync: this.radio2, //同步状态
          size: pageSize,
          start: start,
          orderTime: this.enterStartTime,
          patientId: this.patientId,
        }).then((res) => {
          this.tableData = res.data;
          this.totalCount = res.totalCount;
        });
      } else {
        this.$message({message: "请先选择病人", type: "warning"});
      }
    },
    //查询
    queryData() {
      this.medOrderExecQueryList(this.PageSize, 1);
    },
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val;
      // 点击每页显示的条数时，显示第一页
      this.medOrderExecQueryList(val, 1);
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.start = 1;
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.start = val;
      // 切换页码时，要获取每页显示的条数
      this.medOrderExecQueryList(this.PageSize, (this.start = val));
    },
  },
};
</script>
<style lang="scss" scoped>
.search-box{
  display: flex;
  flex-wrap: wrap;
  line-height: 60px;
  .item {
    margin-right: 30px;
  }
  .el-checkbox-group{
    display: inline-block;
    padding-left: 10px;
    .el-checkbox{
      margin-right: 10px;
    }
  }
}
</style>
